<!-- 大转盘 -->
<template>
    <div class="container">
        <div v-for="(item, index) in DrawList" :key="index" class="prize-item"
            :class="currentIndex === index ? 'active' : ''" @click="() => draw(index)">
            <img :src="item.url" alt="" />
            <p class="desc">{{ item.desc }}</p>
        </div>
        <van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }">
            <p>😰</p>
            <p>谢谢参与</p>
        </van-popup>
    </div>
</template>
 
<script setup lang="ts">
import { ref, computed } from 'vue'
import none from '../assets/img/谢谢_参与.png'
import topPrize from '../assets/img/宝箱.png'
import secondPrize from '../assets/img/福袋.png'
import thirdPrize from '../assets/img/Group.png'
import fourthPrize from '../assets/img/红包.png'
import redEnvelope from '../assets/img/redpack.png'
import start from '../assets/img/立即抽奖按钮.png'

const showTop = ref(false)
interface Prize {
    url: string
    desc: string
}
const pirzeList: Prize[] = [
    { url: redEnvelope, desc: '现金红包' },
    { url: secondPrize, desc: '二等奖' },
    { url: topPrize, desc: '一等奖' },
    { url: thirdPrize, desc: '三等奖' },
    { url: redEnvelope, desc: '现金红包' },
    { url: redEnvelope, desc: '现金红包' },
    { url: none, desc: '' },
    { url: fourthPrize, desc: '四等奖' }
]
const btnStart = { url: start, desc: '' }
const DrawList = computed(() => {
    return [...pirzeList.slice(0, 4), btnStart, ...pirzeList.slice(4)]
})
const drawOrder = [0, 1, 2, 5, 8, 7, 6, 3] // 抽奖顺序
let count = 0 // 抽奖次数
let isDrawing = false // 是否正在抽奖
const currentIndex = ref<number | null>(null) // 当前选中的奖品
const circle = 32 // 一圈8个奖品，至少转4圈

const draw = (index: number) => {
    if (index === 4) {
        // 开始抽奖
        if (isDrawing) {
            return
        }
        isDrawing = true

        const position = 6 // 假设后台返回的中奖位置是5

        const timer = setInterval(() => {
            currentIndex.value = drawOrder[count % drawOrder.length]
            count++
            if (count > circle && currentIndex.value === drawOrder[position - 1]) {
                // 抽奖结束
                clearInterval(timer)
                // 停顿一会显示中奖
                setTimeout(() => {
                    showTop.value = true
                    isDrawing = false
                    count = 0
                    currentIndex.value = null
                }, 500)
            }
        }, 100) //转盘速度
    }
}
</script>
 
<style lang="less" scoped>
.container {
    width: 100%;
    max-width: 350px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: space-between;
    margin: 0 auto;
    margin-top: 20px;

    .prize-item {
        width: 28%;
        border-radius: 8px;
        text-align: center;
        background-color: white;
        margin: 10px 0;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
            width: 40px;
        }
    }

    .prize-item:nth-child(5) {
        padding: 0;
        background-color: transparent;

        img {
            transition: all 0.2s;
            width: 100%;

            &:active {
                opacity: 0.8;
            }
        }

    }

    .active {
        background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
    }

    .desc {
        font-size: .8rem;
        margin-top: 6px;
    }
}
.van-popup{
    display: flex;
    flex-direction: column;
    justify-content: center;
    p:nth-child(1){
        font-size: 3.5rem;
    }
    p:nth-child(2){
        font-size: 1.2rem;
        margin-top: 8px;
    }
}
</style>